{extend name="public/base"}

{block name="title"}
订单列表
{/block}

{block name="style"}
{css href="/static/wechat/css/order.css" /}
<style>
    .weui-form-preview__label {
        text-align: left;
        font-size: .7rem;
        max-width: 70%;
    }
</style>
{/block}

{block name="body"}
<div class="pageControl orderList">
    <div class="msui_nav msui_navTop">
        <a class="msui_navTop-back" href="{:url('member/index')}"><i class="micon-back"></i></a>
        <h1 class="msui_navTop-title">订单</h1>
    </div>
    <div class="msui_menu">
        <div class="msui_menu-mask">
            <ul class="msui_menu-bd js-menu">
                <li class="msui_menu-li" dataTab="1"><a class="msui_tabMenu-active msui_menu-item fs08 cl-9999" href="{:url('index')}" data-status="0">全部</a>
                <li class="msui_menu-li" dataTab="2"><a class="msui_menu-item fs08 cl-9999" href="{:url('index')}" data-status="1">待抢单</a></li>
                <li class="msui_menu-li" dataTab="3"><a class="msui_menu-item fs08 cl-9999" href="{:url('index')}" data-status="11">议价中</a></li>
                <li class="msui_menu-li" dataTab="4"><a class="msui_menu-item fs08 cl-9999" href="{:url('index')}" data-status="2">待付款</a></li>
                <li class="msui_menu-li" dataTab="5"><a class="msui_menu-item fs08 cl-9999" href="{:url('index')}" data-status="3">服务中</a></li>
                <li class="msui_menu-li" dataTab="5"><a class="msui_menu-item fs08 cl-9999" href="{:url('index')}" data-status="4">待确认</a></li>
                <li class="msui_menu-li" dataTab="7"><a class="msui_menu-item fs08 cl-9999" href="{:url('index')}" data-status="99">待评价</a></li>
                <li class="msui_menu-li" dataTab="8"><a class="msui_menu-item fs08 cl-9999" href="{:url('index')}" data-status="98">已评价</a></li>
                <!-- 用于动画的层 -->
                <div id="line" class="msui_menu-baseline"></div>
            </ul>
        </div>
        <!--<div class="msui_menu-dropdown">-->
            <!--<i class="micon-down"></i>-->
        <!--</div>-->
    </div>
    <div class="mtab_list">
        <div class="mtab_list-bd">

        </div>
    </div>
</div>
<!-- loading toast -->
<div id="loadingToast" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast" style="opacity: 1; visibility: visible;">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">加载中...</p>
    </div>
</div>
{/block}
{block name="javascript"}
<script>
    $(function () {
        var obj = {
            'is_more' : true,
            'page' : 1,
            'url' : '{:url("get_order_server_list")}',
            'status' : {$status}
        };

        if (obj.status > 0) {
            // 默认定位到进来的状态
            var data_status_index = $("a[data-status='"+obj.status+"']").parent().index() + 1;
            var _li_width = $('.msui_menu-bd').find('.msui_menu-li').width();
            var _w_width = $(window).width();
            if (_w_width - data_status_index * _li_width < _li_width) {
                if (_w_width < 372) {
                    $(".msui_menu-mask").scrollLeft((data_status_index - 4) * _li_width);
                } else {
                    $(".msui_menu-mask").scrollLeft((data_status_index - 5) * _li_width);
                }
            }
            $(".msui_menu-mask").find('a').removeClass('msui_tabMenu-active');
            $("a[data-status='"+obj.status+"']").addClass('msui_tabMenu-active');
            $("#line").animate({
                marginLeft:(data_status_index - 1) * _li_width
            }, 300);
        }

        get_order_list();
        $(window).scroll( function() {
            if (($(document).height() - $(this).scrollTop() - $(this).height()<50) && obj.is_more){
                get_order_list();
            }
        });
        $(".js-menu a").click(function (e) {
            e.preventDefault();
            obj.page = 1;
            obj.status = $(this).data('status');
            $(".mtab_list-bd").html('');
            get_order_list();
        });

        function get_order_list() {
            $('#loadingToast').fadeIn(100);
            obj.is_more = false;
            $.ajax({
                type : 'POST',
                url : obj.url + '?page=' + obj.page,
                data : {
                    status : obj.status
                },
                dataType : 'json',
                success : function (msg) {
                    $('#loadingToast').fadeOut(100);
                    if (obj.page == 1) {
                        $(".mtab_list-bd").html(msg.tpl);
                    } else {
                        $(".mtab_list-bd").append(msg.tpl);
                    }
                    // 计算是否还有更多数据
                    if ((msg.data.total - (msg.data.current_page * msg.data.per_page)) > 0) {
                        obj.is_more = true;
                    }
                    obj.page++;
                }
            });
        }
    });

</script>
{/block}